<script setup lang="ts">
import {ref, defineProps, computed} from 'vue'
import {orderSingleInfo,dispatch,receive,downloadExcel} from "../api/order.ts";

import {parseDelivery, parseStatus, parseTime} from "../utils";
import Rating from "./Rating.vue"
import {singleUserInfo} from "../api/user.ts";
import {singleStoreInfo} from "../api/store.ts";
import PayDialog from "./PayDialog.vue";

const orderId = ref()
const status = ref('')
const ownerId = ref()
const storeId = ref()
const productId = ref()
const storeName = ref('')
const userName = ref('')
const productName = ref('')
const price = ref()
const quantity = ref()
const priceSum = computed(() => price.value * quantity.value)
const createTime = ref('')
const deliveryMethod = ref('')
const ratingOpen = ref(false)
const role =  sessionStorage.getItem('role')
const openPayDialog = ref(false)

const props = defineProps<{
  orderId : number,
}>()
orderId.value = props.orderId
getOrderInfo()
function getOrderInfo(){
  orderSingleInfo(orderId.value)
      .then(res =>{
        status.value = res.data.result.status
        ownerId.value = res.data.result.ownerID
        storeId.value = res.data.result.storeID
        productId.value = res.data.result.commodityID
        productName.value = res.data.result.commodityName
        price.value = res.data.result.price
        quantity.value = res.data.result.quantity
        createTime.value =parseTime(res.data.result.createTime)
        deliveryMethod.value = res.data.result.deliveryMethod

        singleUserInfo(ownerId.value).then(res =>{
          userName.value = res.data.result.name
        })
        singleStoreInfo(storeId.value).then(res =>{
          storeName.value = res.data.result.name
        })
      })

}

function dispatch_staff(){
  dispatch(orderId.value)
      .then(res =>{
        if (res.data.code === '000') {
          ElMessage({
            message: "发货成功",
            type: 'success',
            center: true,
          })
          status.value = "UNGET"
        }
        else{
          ElMessage({
            message: res.data.msg,
            type: 'error',
            center: true,
          })
        }
      })
}

function receive_custom(){
  receive(orderId.value).then(res =>{
    if (res.data.code === '000') {
      ElMessage({
        message: "收货成功",
        type: 'success',
        center: true,
      })
      status.value = "UNCOMMENT"
    }
    else{
      ElMessage({
        message: res.data.msg,
        type: 'error',
        center: true,
      })
    }
  })

}

function ratingDone(){
  status.value = "DONE"
  ratingOpen.value = false
}

function payDone(){
  openPayDialog.value = false
  status.value = "UNSEND"
}
</script>


<template>
  <el-card class="order-item-card" shadow="hover">
      <h1> 订单id:{{ orderId }} </h1>
      <el-descriptions label-align="right"
                       width="150px"
                       :column="3"
                       border >
        <el-descriptions-item label="订单状态" align="center">
          <el-tag>{{ parseStatus(status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商店"  align="center">
          {{ storeName }}
        </el-descriptions-item>
        <el-descriptions-item label="顾客"  align="center">
          {{ userName }}
        </el-descriptions-item>
        <el-descriptions-item label="商品"  align="center">
          {{ productName }}
        </el-descriptions-item>
        <el-descriptions-item label="单价"  align="center">
          {{ price }}
        </el-descriptions-item>
        <el-descriptions-item label=购买数量  align="center">
          {{ quantity }}
        </el-descriptions-item>
        <el-descriptions-item label=总价  align="center">
          {{ priceSum }}
        </el-descriptions-item>
        <el-descriptions-item label="提货方式"  align="center">
          {{ parseDelivery(deliveryMethod) }}
        </el-descriptions-item>
      </el-descriptions>
    <el-button v-if = "role === 'CUSTOMER' && status === 'UNPAID'" @click = "openPayDialog = true" type="primary">支付</el-button>
    <el-button v-if = "role === 'CUSTOMER' && status === 'UNGET'" @click = "receive_custom" type = "primary">收货</el-button>
    <el-button v-if = "role === 'STAFF' && status === 'UNSEND'" @click = "dispatch_staff" type = "primary">发货</el-button>
    <el-button v-if = "role === 'CUSTOMER' && status === 'UNCOMMENT'" @click = "ratingOpen = true" type = "primary">评价</el-button>
    <el-dialog v-model = "openPayDialog" title = "支付" width = "600" >
      <PayDialog :orderId="orderId" @finish = "payDone"></PayDialog>
    </el-dialog>
    <el-dialog v-model = "ratingOpen" title = "评价" width = '500px'>
      <Rating :orderId="orderId" @finish = "ratingDone"></Rating>
    </el-dialog>

  </el-card>

</template>
<style scoped>

</style>